<template>
  <div>
    <el-dialog title="新建线索" v-model="props.dialogFormVisible"   @close="dialogFormVisible"   style="width: 650px">
      <el-form ref="Newform" label-width="80px" :rules="rules" :model="addclueList">
        <el-form-item label="手机号" prop="phone">
          <el-input placeholder="请输入" v-model="addclueList.phone"></el-input>
        </el-form-item>

        <el-form-item label="渠道信息" prop="sourceChannel">
          <el-select placeholder="请选择渠道来源"  v-model="addclueList.sourceChannel">
            <el-option label="线上活动" v-for="item in disciplineintention" :key="item.id" :value="item.content">
              {{item.content}}
            </el-option>
           
          </el-select>
        </el-form-item>

        <el-form-item label="活动信息" prop="activityInformation">
          <el-select placeholder="请选择活动信息"  v-model="addclueList.activityInformation">
            <el-option label="课程折扣" value="1"></el-option>
            <el-option label="课程代金券" value="2"></el-option>
           
          </el-select>
        </el-form-item>

        <el-form-item label="客户姓名" prop="customerName">
          <el-input placeholder="请输入" v-model="addclueList.customerName"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="customerGender">
          <el-radio-group style="width: 250px" v-model="addclueList.customerGender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄" prop="customerAge" >
          <el-input placeholder="请选择" v-model="addclueList.customerAge"></el-input>
        </el-form-item>

        <el-form-item label="微信" prop="wechatId">
          <el-input placeholder="请输入" v-model="addclueList.wechatId"></el-input>
        </el-form-item>

        <el-form-item label="QQ" prop="qqNumber">
          <el-input placeholder="请输入" v-model="addclueList.qqNumber"></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: end">
        <el-button @click="btnCancel" class="searchbtn" style="width:100px;height:40px" 
          >取消</el-button
        >
        <el-button class="searchbtn green" type="primary" size="large" style="width: 100px" @click="okaybtn" :disabled="false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { addTableList } from '@/api/home'
import {cxTabelCourse} from '@/api/course'
import {  ElMessage } from 'element-plus'

const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  }
})
 const rules=({
      //id
      id: [{ required: true, message: '系统生成', trigger: 'blur' }],
      //手机号
      phone: [{ required: true, message: '请输入联系方式', trigger: 'change' },
      {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
      //渠道来源
      sourceChannel: [{ required: true, message: '请选择渠道来源', trigger: 'blur' }],
      //活动信息
      activityInformation: [{ required: true, message: '请选择活动信息', trigger: 'blur' }],
  })

     const addclueList=ref({
     phone:'',
     sourceChannel:'',
     activityInformation:'',
     customerName:'',
     customerGender:'',
     customerAge:'',
     wechatId:'',
     qqNumber:""
     
})

const emits = defineEmits(["dialogFormVisible2"])
const btnCancel = () => {
 emits('dialogFormVisible2',false)
 // props.value.showDialog=false
}

const Newform =ref(null)
  //表单提交
  const okaybtn=async()=>{
  try {
    await Newform.value.validate()
    await addTableList(addclueList.value)
    ElMessage('新增成功')
    addclueList.value=""
    //关闭弹窗
    btnCancel()
addclueList.value=''
  } catch (error) {
    ElMessage.error('请输入表单内容')
  }
} 

const disciplineintention = ref([])
const discipline = async () => {
 const { data } = await cxTabelCourse(16)
 disciplineintention.value = data
 console.log( disciplineintention.value);

}
onMounted(()=>{
discipline()
})
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
  padding: 0px;
  margin: 0px;
  height: 50px;
  line-height: 50px;
  color: #fff !important;
  border-bottom: 1px solid #999;
}
::v-deep .el-dialog {
  padding: 0px;
}
.el-form-item {
  display: block;
  margin-left: 30px;
}
.el-dialog {
  .el-input {
    width: 250px;
  }
  .el-select {
    width: 250px;
  }
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
::v-deep .el-form-item__label {
  width: 0px;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.searchbtn {
  border-radius: 20px;
}
.green {
  background: #05cc95;
}
</style>
